<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代码模块生成</title>
    <script src="js/jquery.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app" style="margin: 10px;">
        <el-form :model="schemes" inline>
            <el-form-item label="表名">
                <el-select v-model="selected" value-key="jdbcName" @change="searchTableColumns()" placeholder="请选择">
                    <el-option
                        v-for="item in lists"
                        :key="item.id"
                        :label="item.jdbcName"
                        :value="item">
                        <span style="float: left">{{ item.jdbcName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.comments }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="模板名称">
                <el-input v-model="schemes.name" placeholder="模板名称"></el-input>
            </el-form-item>

            <el-form-item label="生成包路径">
                <el-input v-model="schemes.packageName" placeholder="生成包路径"></el-input>
            </el-form-item>

            <el-form-item label="模块名">
                <el-input v-model="schemes.moduleName" placeholder="模块名"></el-input>
            </el-form-item>

            <el-form-item label="创建者">
                <el-input v-model="schemes.functionAuthor" placeholder="创建者"></el-input>
            </el-form-item>

            <el-form-item label="模块描述">
                <el-input v-model="schemes.functionComment" placeholder="模块描述"></el-input>
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="searchSchemes()"></el-button>
            <el-button type="primary" icon="el-icon-plus" @click="saveSchemes()"></el-button>
        </el-form>
        <hr/>
        <br/>
        <el-table :data="tables" border style="width: 100%">
            <el-table-column type="index" label="编号" width="70" align="center"></el-table-column>
            <el-table-column prop="name" label="模板名称" align="center"></el-table-column>
            <el-table-column prop="table.jdbcName" label="表名" align="center"></el-table-column>
            <el-table-column prop="packageName" label="包路径" align="center"></el-table-column>
            <el-table-column prop="moduleName" label="模块名" align="center"></el-table-column>
            <el-table-column prop="functionAuthor" label="创建者" align="center"></el-table-column>
            <el-table-column prop="functionComment" label="模块描述" align="center"></el-table-column>
            <el-table-column prop="functionComment" label="模块描述" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click=""></el-button>
                    <el-button type="primary" size="mini" icon="el-icon-download" @click="generateCode(scope.row)"></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"  @click="removeSchemes(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                lists:[],
                selected:{},
                schemes:{
                    tId:'',
                    name:'',
                    category: '',
                    packageName: 'com.gyh.',
                    moduleName: '',
                    functionAuthor: 'gyh',
                    functionComment: '',
                    subModuleName: '',
                    functionName: '',
                    functionNameSimple: '',
                    flag: '',
                    replaceFile: ''
                },
                tables:[],
                currentRow:''
                
            },
            beforeCreate: function(){
                var _self=this;
                $.get('http://localhost:8080/moyun/table',function(result){
                    if (result.code == 0) {
                        _self.lists = result.data;
                    }
                });
            },
            methods: {
                searchTableColumns:function(){
                    this.schemes.tId = this.selected.id;

                },
                saveSchemes:function(){
                    var _self = this;
                    $.ajax({
                        type:'POST',
                        url: 'http://localhost:8080/moyun/schemes',
                        contentType: 'application/json; charset=utf-8',
                        data:JSON.stringify(_self.schemes),
                        dataType: 'json',
                        success:function(result){
                            _self.$notify({
                                    title: '成功',
                                    message: _self.schemes.name+",添加成功",
                                    type: 'success'
                                });
                        },
                        error:function(result){
                            _self.$notify.error({
                                title: '错误',
                                message: _self.selected.jdbcName+',添加失败'
                            });
                        }
                    });
                },
                searchSchemes: function(){
                    var _self = this;
                    $.get('http://localhost:8080/moyun/schemes/search',{
                        tId: _self.schemes.tId
                    },function(result){
                        if (result.code == 0) {
                            console.log(result.data);
                            _self.tables = result.data
                            //_self.$message({type: 'success', message: '删除成功'});
                        } else {
                            _self.$notify.error({
                                title: '错误',
                                message: _self.selected.jdbcName+',读取失败'
                            });
                        }
                    });
                },
                handleRowChange: function(currentRow,oldCurrentRow){
                    this.currentRow = currentRow;
                },
                removeSchemes: function(row){
                    //console.log(row);
                    var _self = this;
                    $.get('http://localhost:8080/moyun/schemes/delete',{
                        id: row.id
                    },function(result){
                        _self.$notify({
                            title: '成功',
                            message: row.name+",删除成功",
                            type: 'success'
                        });
                    });
                },
                generateCode: function(row){
                    var _self = this;
                    $.get('http://localhost:8080/moyun/schemes/gen',{
                        id: row.id
                    },function(result){
                        if (result.code==0) {
                            _self.$notify({
                                title: '成功',
                                message: row.name+",代码生成完成",
                                type: 'success'
                            });
                        } else {
                            _self.$notify.error({
                                title: '错误',
                                message: row.name+",代码生成失败",
                                type: 'success'
                            });
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>